<template>
  <div class="home">
    <Child1 test="$attrs" />
    <Child2 />
    <!-- 自定义组件实现v-model -->
    <ModelTest v-model="text" />
    <NextTick />
    <SlotTest>
      普通插槽
      <template v-slot:header>
        <!-- v-slot:header简写#header -->
        具名插槽
      </template>
    </SlotTest>
    <SlotTest1>
      <template v-slot="props">
        {{props.slotData.title}}
      </template>
    </SlotTest1>
    <component v-for="(item, index) in list" :key="index" :is="item" />
    <AsyncComponent v-if="isAsync" />
    <button @click="isAsync = true">渲染异步组件</button>
    <p>{{mixinName}}</p>
    <LifecycleHooks />
  </div>
</template>

<script>
import mixins1 from '@/mixins/mixin1'
import Child1 from '@/components/Child1'
import Child2 from '@/components/Child2'
import ModelTest from '@/components/ModelTest'
import NextTick from '@/components/NextTick'
import SlotTest from '@/components/SlotTest'
import SlotTest1 from '@/components/SlotTest1'
import LifecycleHooks from '@/components/LifecycleHooks'

export default {
  name: 'Home',
  components: { Child1, Child2, ModelTest, NextTick, SlotTest, SlotTest1, LifecycleHooks,
    AsyncComponent: () => import(/* webpackChunkName: "AsyncComponent" */ "@/components/AsyncComponent")
  },
  mixins: [mixins1],
  data() {
    return {
      text: '',
      list: ['Child1', 'Child2'],
      isAsync: false
    }
  },
  beforeCreate() {
    console.log('parent -> ', 'beforeCreate')
  },
  created() {
    console.log('parent -> ', 'created')
    this.getMixinName()
  },
  beforeMount() {
    console.log('parent -> ', 'beforeMount')
  },
  mounted() {
    console.log('parent -> ', 'mounted')
  },
  beforeUpdate() {
    console.log('parent -> ', 'beforeUpdate')
  },
  updated() {
    console.log('parent -> ', 'updated')
  },
  beforeDestroy() {
    console.log('parent -> ', 'beforeDestroy')
  },
  destroyed() {
    console.log('parent -> ', 'destroyed')
  },
  methods: {
    handleClick() {
      console.log('父组件事件')
    }
  }
}
</script>
